<template>
  <div class="add mt-20 mr-20">
    <el-card class="add-container" shadow>
      {{ $t('pageStr.enableBridgeStr') }}
      <el-switch :disabled="permissionDisabled()" v-model="form.enabled" style="margin-left: 10px" active-value="1" inactive-value="0"></el-switch>
      <el-form :disabled="permissionDisabled()" :model="form" :rules="rules" ref="formRef" label-width="220px" label-position="left"
               class="bridgeForm">
        <template v-if="form.enabled === '1'">
          <el-form-item :label="$t('pageStr.CoverthefollowinginterfaceStr')">
            <el-checkbox checked disabled>以太网适配器: "eth0"</el-checkbox>
            <br/>
            <el-checkbox v-model="form.check" clearable>以太网适配器: "eth1"</el-checkbox>
          </el-form-item>
          <div class="content-title">{{ $t('lanConfig') }}</div>
          <el-form-item :label="$t('pageStr.ipAddr2Str')" style="max-width: 500px">
            <el-input v-model="form.bridgeCfg.ipaddr" clearable></el-input>
          </el-form-item>
          <el-col :span="24">
            <el-form-item :label="$t('pageStr.subMaskStr')" style="max-width: 500px">
              <el-input v-model="form.bridgeCfg.netmask" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('pageStr.gatewayStr')" style="max-width: 500px">
              <el-input v-model="form.bridgeCfg.gateway" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="$t('pageStr.useDnsServerStr')" style="max-width: 500px;">
              <el-input v-model="form.bridgeCfg.dns" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-for="item of form.muiltIp.length">
            <el-form-item :label="$t('pageStr.ifaceAliasStr')+'_'+item" style="max-width: 500px">
              <el-input v-model="form.muiltIp[item - 1]" :maxlength="15">
                <template #suffix>
                  <el-icon v-permissionShow v-if="form.muiltIp.length > 1" color="#E06363" :size="20" style="cursor: pointer"
                           @click="delIpRow(item,form.muiltIp)">
                    <CloseBold/>
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="form.muiltIp.length < 8" :span="24" style="max-width: 280px;margin-left: 220px">
            <el-button style="width: 100%" @click="addIp(form.muiltIp)">
              <el-icon>
                <Plus/>
              </el-icon>
            </el-button>
          </el-col>

          <template v-if="!form.check">
            <div class="content-title">{{ $t('wanConfig') }}</div>
            <el-col :span="24">
              <el-form-item :label="$t('pageStr.protocolStr')" style="max-width: 500px">
                <el-radio-group v-model="form.wanCfg.proto" fill="#C29B74">
                  <el-radio-button label="static">{{ $t('staticAddress') }}</el-radio-button>
                  <el-radio-button label="dhcp">{{ $t('DHCPClient') }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <template v-if="form.wanCfg.proto == 'static'">
            <el-col :span="24">
              <el-form-item :label="$t('pageStr.ipAddr2Str')" style="max-width: 500px">
                <el-input v-model="form.wanCfg.ipaddr" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('pageStr.subMaskStr')" class="mxw500">
                <el-input v-model="form.wanCfg.netmask" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('pageStr.gatewayStr')" class="mxw500">
                <el-input v-model="form.wanCfg.gateway" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('pageStr.useDnsServerStr')" class="mxw500">
                <el-input v-model="form.wanCfg.dns" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-for="item of form.muiltIpWAN.length">
              <el-form-item :label="$t('pageStr.ifaceAliasStr')+'_'+item" class="mxw500">
                <el-input v-model="form.muiltIpWAN[item - 1]" :maxlength="15">
                  <template #suffix>
                    <el-icon v-permissionShow v-if="form.muiltIpWAN.length > 1" color="#E06363" :size="20"
                             style="cursor: pointer"
                             @click="delIpRow(item,form.muiltIpWAN)">
                      <CloseBold/>
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col v-if="form.muiltIpWAN.length < 8" :span="24" style="max-width: 280px;margin-left: 220px">
              <el-button style="width: 100%;" @click="addIp(form.muiltIpWAN)">
                <el-icon>
                  <Plus/>
                </el-icon>
              </el-button>
            </el-col>
            </template>
          </template>
        </template>
      </el-form>
    </el-card>
  </div>
  <div v-permissionShow="permission.adminAndWrite" style="display: flex; align-items: center">
    <el-button class="btn" :loading="saveLoading" type="primary" color="#C29B74" @click="handleSubmit(formRef)">{{ $t('tabsStr.applyStr') }}</el-button>
    <img style="width: 18px; height: 18px;" src="/icon/tipIcon.png">
    <div style="font-size: 14px">{{ $t('pageStr.takeNetworkEffectAfterRebootStr') }}</div>
  </div>
</template>

<script setup>
import {reactive, ref, onBeforeMount, onBeforeUnmount} from 'vue'
import {ElMessage} from 'element-plus'
import {reqGetBridgeData, reqSetBridgeData} from '@/api/network/bridge'
import {reqReset} from "@/api/network/interface";
import { useI18n } from 'vue-i18n'
import permission from "@/utils/permission";
import {permissionDisabled} from '@/utils'
const {t} = useI18n()
const formRef = ref(null)
const saveLoading = ref(false)
const form = ref({
  muiltIp: [''],
  wanCfg: {},
  bridgeCfg: {},
  enabled: 0,
  muiltIpWAN: ['']
})
const rules = reactive({})
onBeforeMount(() => {
  reqGetBridgeData().then((res) => {
    console.log('网桥页面挂载,数据', res)
    form.value.muiltIpWAN = res.lan1aliasip.length ? res.lan1aliasip : ['']
    form.value.muiltIp = res.br0aliasip.length ? res.br0aliasip : ['']
    form.value.wanCfg = res.wanCfg
    form.value.bridgeCfg = res.bridgeCfg
    form.value.enabled = res.bridgeCfg.ifname.length > 0 ? '1' : '0'
  })
})

function addIp(ipArr) {
  if (ipArr.length > 7) {
    ElMessage.warning('最大支持8个IP')
    return
  }
  ipArr.push('')
}

function delIpRow(rowId, ipArr) {
  ipArr.splice(rowId - 1, 1)
}

// 提交
function handleSubmit(formEl) {
  formEl?.validate(async (valid) => {
    if (!valid) {
      return
    }
    const submitForm = {
      enabled: form.value.enabled,
      name: form.value.bridgeCfg.selectName,
      ipaddr: form.value.bridgeCfg.ipaddr,
      netmask: form.value.bridgeCfg.netmask,
      gateway: form.value.bridgeCfg.gateway,
      dns: form.value.bridgeCfg.dns,
      ifname: form.value.bridgeCfg.ifname,
      protoWan: form.value.wanCfg.proto,
      ipaddrWan: form.value.wanCfg.ipaddr,
      netmaskWan: form.value.wanCfg.netmask,
      gatewayWan: form.value.wanCfg.gateway,
      dnsWan: form.value.wanCfg.dns,
    }
    let i = 0,j=0
    form.value.muiltIp.forEach((item) => {
      submitForm['br0ipaddr' + i] = item
      i++
    })
    form.value.muiltIpWAN.forEach((item) => {
      submitForm['lan1ipaddr' + j] = item
      j++
    })
    submitForm.br0num = i
    submitForm.lan1num = j
    console.log('新增数据，', submitForm)
    saveLoading.value = true
    await _add(submitForm)
  })
}

async function _add(data) {
  try {
    await reqSetBridgeData(data)
    // 修改IP成功后 重启网络模块
    await reqReset()
    onSuccess()
  } catch (err) {
    ElMessage.error(t('errorTip'))
  }
  saveLoading.value = false
}
function onSuccess() {
  ElMessage.success(t('successTip'))
}

</script>

<style scoped>
.content-title {
  /*padding-left: 10px;*/
  padding-bottom: 5px;
  /*margin-top: 10px;*/
  font-size: 18px;
  font-weight: bold;
}

.bridgeForm {
  max-width: 800px;
}

.btn {
  margin: 20px;
  color: #fff;
  min-width: 100px;
}

.add {
  display: flex;
}

.add-container {
  flex: 1;
  height: 100%;
}

.bottom-text {
  margin: 20px;
  font-size: 14px;
  color: #999999;
}

</style>
<style>
.el-form-item__label {
  font-size: 16px;
}
</style>